<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div>div1</div>
    <span>span</span>
    <ul id="ul1">
        <li id="li1">li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>

    <div>
        <div id="div2">
            div2
            <span>span2</span></div>
    </div>


    <script>
        // 我们可以通过js 来访问html dom树 上的任意节点
        // 并且通过节点来修改页面内容  （创建、删除）
        var li1=document.querySelector('#li1');
        // 查看父节点
        console.log(li1.parentNode);

        var ul1=document.querySelector('#ul1');
        // 查看子节点
        console.log(ul1.children);


        // childNodes 可以显示多余文本  用的比较少
        console.log(ul1.childNodes);


        var div2=document.querySelector('#div2');
        console.log(div2.childNodes);

        // 查看第一个子节点
        console.log(ul1.firstChild);

        // 查看第一个元素子节点
        console.log(ul1.firstElementChild);
        console.log(ul1.lastElementChild);

        // 兄弟节点   上一个兄弟节点 没有返回null
        console.log(li1.previousElementSibling);
        console.log(li1.nextElementSibling);
        
    </script>
</body>
</html>